<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" id="viewport" content="target-densitydpi=1,width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1" />
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <title>评价页面</title>
    <style type="text/css">
        #mybody td {
            height: 60px;
            font-size: 16px;
            text-align: left;
            font-weight: bold ;
        }
        #mybody .text {
            width: 98%;
            height: 60px;
            font-size: 15px;
            resize : none;
            border: 0;
            background-color: transparent;
            font-weight: bold ;

        }
    </style>
</head>
<body background="/images/bk1.jpg">
    <div class="container" >
        <div style="margin-top: 30px"><span style="font-size: 30px;"><b>课程评价详情页</b></span> <a href="/login/index">返回</a></div>
        <div class="container" style="height: 300px;margin-top: 20px">
            <div id="gradeEchar" style="width: 98%;height: 300px;float: left"></div>
        </div>
        <div class="container" style="height: 300px;margin-top: 20px">
            <div id="sexEchar" style="width: 98%;height: 300px;"></div>
        </div>
        <div class="container">
            <table id='myClass' class="table table-hover" style="margin-top: 10px">
                <thead>
                    <tr>
                        <td colspan="2" style="font-size:20px;text-align: left"><b>评价列表</b></td>
                    </tr>
                    <tr>
                        <td>#</td>
                        <td>用户名</td>
                        <td>性别</td>
                        <td>分数</td>
                        <td>评价信息</td>
                    </tr>
                </thead>
                <tbody id="mybody">

                </tbody>
            </table>
        </div>
    </div>
</body>
    <script type="text/javascript">
        var sexMap = [], gradeMap = [];
        $(function(){
            appraiseList();

        });

        function appraiseList() {
            var id = ${id};
            $.ajax({
                type:'POST',
                url:"/login/appraiseList",
                data:{'id':id},
                dataType:'json',
                success: function (data) {

                    var list = data.list;
                    var text = '';
                    for (var i = 0; i < list.length; i++) {
                        var sex = list[i].sex == 1 ? "男" : "女";
                        text += '<tr>';
                        text += '<td>'+list[i].id+'</td>';
                        text += '<td>'+list[i].userName+'</td>';
                        text += '<td>'+sex+'</td>';
                        text += '<td>'+list[i].grade+'</td>';
                        text += '<td><textarea class="text" readonly="readonly">'+list[i].appraiseInfo+'</textarea></td>';
                        text += '</tr>';
                    }
                    $('#mybody').html(text);

                    var sexList = data.sexList;
                    for (var i = 0; i < sexList.length; i++) {
                        sexMap.push({
                           name:sexList[i].sex == 1 ? "男" : "女",
                            value:sexList[i].count
                        });
                    }
                    var gradeList = data.gradeList;
                    for (var i = 0; i < gradeList.length; i++) {
                        gradeMap.push({
                            value:gradeList[i]['count'],
                            name:gradeList[i]['grade']

                        });
                    }

                    gradeEchar();
                    sexEchar();
                }
            });
        }

        function gradeEchar() {
            var myChart = echarts.init(document.getElementById('gradeEchar'));
            option = {

                title : {
                    text: '评价分数比列',
                    x:'center',
                    top: 20,
                    textStyle: {
                        color: '#fff'
                    }
                },

                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series : [
                    {
                        name:'分数',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '50%'],
                        data:gradeMap.sort(function (a, b) { return a.value - b.value; }),
                        roseType: 'radius',
                        label: {
                            normal: {
                                textStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                label:{
                                    show: true,
                                    formatter: '{b} : {c} ({d}%)',
                                    textStyle: {
                                        color: '#fff'
                                    },
                                },
                                labelLine :{show:true}

                            }
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

        function sexEchar() {
            debugger;
            var myChart = echarts.init(document.getElementById('sexEchar'));
            option = {

                title : {
                    text: '学生性别比列',
                    x:'center',
                    top: 20,
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    textStyle: {
                        color: '#fff'
                    },
                    data:['男','女']
                },
                series: [
                    {
                        name:'性别',
                        type:'pie',
                        radius: ['50%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },

                        data:sexMap
                    }
                ]
            };
            myChart.setOption(option);
        }
    </script>
</html>